<!-- D:/project/en2_haiou/haiou-en2-pc/static/images/news -->
<template>
  <div class="pagebody">
    <Header />
    <div class="bgfff">
      <div class="container">
        <!-- 导航 -->
        <div class="navigation">
          <div class="nav_font">Pharmacy Captain Homepage</div>
          <img src="@/static/images/public/right_arrow.png"
               class="arrow">
          <div class="nav_font">Drug name</div>
          <img src="@/static/images/public/right_arrow.png"
               class="arrow">
          <div class="nav_font">Q&A List Page</div>
          <img src="@/static/images/public/right_arrow.png"
               class="arrow">
          <div class="nav_font"
               style="color:#616469;">Article Title</div>
        </div>
        <div class="content">
          <div class="left">
            <!-- 文章详情 -->
            <div class="newsinfo">
              <div class="newstitle">
                <div class="display_board">new</div>
                <div class="triangle"></div>
                <div class="newstitle_font">What are the side effects of Sotorasib medication?</div>
              </div>
              <div class="describe">
                <img src="@/static/images/news/eyes.png"
                     class="eye" />
                <div class="describe_font"
                     style="margin-left:4px;">999</div>
                <div class="describe_font"
                     style="margin-left:32px;">Article source: Seagull Pharmacy</div>
                <div class="describe_font"
                     style="margin-left:24px;">January 16, 2024 17:19</div>
              </div>
              <div class="new_content"
                   v-html="content"></div>
            </div>
            <img src="@/static/images/news/que.png"
                 class="any_questions" />
            <understand></understand>
            <div class="tips">Note: For internal discussion among medical personnel only. For specific medication,
              please
              consult the attending physician. Drug information may change over time. For the latest information, we
              recommend adding a medical consultant or consulting for free online.</div>
            <!-- <drugCard style="margin-top:42px;" :drug="drugInfo"></drugCard> -->
            <medicinePirce :name="'Recommended Articles'"
                           :newslist="RecommendedList"></medicinePirce>
            <medicinePirce :name="'Related Articles'"
                           :newslist="relatedList"></medicinePirce>
            <relatedMedications :drugList="drugList"></relatedMedications>
          </div>
          <right></right>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import drugCard from '@/components/drugs/drugCard'
export default {
  components: {
    drugCard,
  },
  async asyncData ({ app, params, error }) {

  },
  data () {
    return {
      content: "<p>Drug side effects of Sotorasib（ H2 arial  20px  #0041a3）</p> ....<p>Drug side effects of Sotorasib（ H2 arial  20px  #0041a3）</p> ....<p>Drug side effects of Sotorasib（ H2 arial  20px  #0041a3）</p> ...."
    }
  },

}
</script>

<style lang="scss" scoped>
.pagebody {
  .navigation {
    display: flex;
    justify-content: flex-start;
    padding-top: 26px;
    align-items: center;

    .nav_font {
      font-size: 12px;
      color: #8a95a2;
      line-height: 12px;
      margin-right: 8px;
    }

    .arrow {
      width: 6px;
      height: 10px;
      margin-right: 8px;
    }
  }

  .content {
    display: flex;
    justify-content: flex-start;

    .left {
      width: 848px;
      flex-shrink: 0;
      padding-right: 24px;
      box-sizing: border-box;

      .newsinfo {
        margin-top: 48px;

        .newstitle {
          display: flex;
          justify-content: flex-start;
          position: relative;

          .display_board {
            width: 68px;
            height: 34px;
            background: linear-gradient(90deg, #fff4e9 0%, #ffeae9 100%);
            border-radius: 0px 24px 24px 0px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            line-height: 34px;
            color: #ff6826;
          }

          .triangle {
            position: absolute;
            width: 0px;
            height: 0px;
            background: linear-gradient(215deg, #fff4e9 0%, #ffeae9 100%);
            border-right: 10px solid #ffeee9;
            border-bottom: 7px solid transparent;
            border-left: 10px solid transparent;
            left: -10px;
            // bottom: -7px;
            top: 34px;
          }

          .newstitle_font {
            font-weight: bold;
            font-size: 28px;
            color: #293347;
            line-height: 28px;
            margin-left: 16px;
          }
        }

        .describe {
          border-bottom: 1px solid #e5e8eb;
          display: flex;
          justify-content: flex-start;
          margin-top: 32px;
          padding-bottom: 24px;

          .eye {
            width: 22px;
            height: 14px;
          }

          .describe_font {
            font-size: 12px;
            color: #8a95a2;
            line-height: 12px;
          }
        }

        .new_content {
          margin-top: 37px;

          ::v-deep span {
            white-space: normal !important;
          }

          ::v-deep h2 {
            color: #002162;
            font-weight: bold;
            margin-top: 24px;
            margin-bottom: 24px;
            text-indent: 36px;
          }

          ::v-deep h3 {
            color: #293347;
            font-weight: bold;
            margin-top: 16px;
            font-size: 20px;
            margin-bottom: 16px;
            text-indent: 36px;
          }

          ::v-deep h4 {
            color: #293347;
            font-weight: bold;
            margin-top: 16px;
            font-size: 18px;
            margin-bottom: 16px;
            text-indent: 36px;
          }

          ::v-deep p {
            color: #293347;
            font-size: 18px;
            line-height: 32px;
            margin-top: 16px;
            margin-bottom: 16px;
            text-indent: 36px;
          }

          ::v-deep a {
            font-size: 18px;
            color: #003399;
          }
        }
      }

      .any_questions {
        width: 824px;
        height: 148px;
        margin-top: 16px;
      }

      .tips {
        font-size: 12px;
        color: #8a95a2;
        line-height: 24px;
        margin-top: 17px;
      }
    }

    .right {
      margin-left: 16px;
    }
  }
}
</style>